import { Card, Steps, NavBar } from 'antd-mobile'
import { useEffect, useState } from 'react'
import useScorll from '@/hooks/useScorll'
const { Step } = Steps
import './index.scss'
import '@/styles/common.scss'
import apis from '@/apis'
const Work: React.FC = () => {
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  const [workList, setworkList]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      const workInfo = res.workInfo
      const workListCopy = [
        // {
        //   title: <div>{workInfo.DX.time}</div>,
        //   description: (
        //     <div className="contentText">
        //       <div>{workInfo.DX.text}</div>
        //     </div>
        //   ),
        // },
        // {
        //   title: <div>{workInfo.FL[0].time}</div>,
        //   description: (
        //     <div className="contentText">
        //       <div>
        //         <span style={{ fontWeight: 700, color: '#000' }}>
        //           公司名称：
        //         </span>
        //         {workInfo.FL[0].corporation}
        //       </div>
        //       <div>
        //         <span style={{ fontWeight: 700, color: '#000' }}>
        //           任职岗位：
        //         </span>
        //         {workInfo.FL[0].job}
        //       </div>
        //       <div>
        //         <span style={{ fontWeight: 700, color: '#000' }}>职责：</span>
        //         {workInfo.FL[0].Duty[0]}
        //       </div>
        //     </div>
        //   ),
        // },
        // {
        //   title: <div>{workInfo.XX.time}</div>,
        //   description: (
        //     <div className="contentText">
        //       <div>
        //         <div>{workInfo.XX.text}</div>
        //       </div>
        //     </div>
        //   ),
        // },
        {
          title: <div>{workInfo.BY[0].time}</div>,
          description: (
            <div className="contentText">
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>
                  公司名称：
                </span>
                {workInfo.BY[0].corporation}
              </div>
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>
                  任职岗位：
                </span>
                {workInfo.BY[0].job}
              </div>
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>职责：</span>
              </div>
              {workInfo.BY[0].Duty.map((item, index) => (
                <div key={index}>{item}</div>
              ))}
            </div>
          ),
        },
        {
          title: <div>{workInfo.HT[0].time}</div>,
          description: (
            <div className="contentText">
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>
                  公司名称：
                </span>
                {workInfo.HT[0].corporation}
              </div>
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>
                  任职岗位：
                </span>
                {workInfo.HT[0].job}
              </div>
              <div>
                <span style={{ fontWeight: 700, color: '#000' }}>职责：</span>
              </div>
              {workInfo.HT[0].Duty.map((item, index) => (
                <div key={index}>{item}</div>
              ))}
            </div>
          ),
        },
      ]
      setworkList(workListCopy)
    }
    queryInfo()
  }, [])

  return (
    <div style={{ paddingBottom: 80 }}>
      <NavBar back={null} className="navBar">
        工作经历
      </NavBar>
      <Card title="" bodyStyle={{ padding: 0 }}>
        {workList && (
          <Steps
            direction="vertical"
            style={{
              '--title-font-size': '22px',
              '--description-font-size': '18px',
            }}
          >
            {workList.map((item, index) => (
              <Step
                key={index}
                title={item.title}
                status="finish"
                description={item.description}
              />
            ))}
          </Steps>
        )}
      </Card>
    </div>
  )
}
export default Work
